<template>
    <div class="page-wrapper" style="height:100%; background:#f5f7fa; min-height:1000px;">
        <div class="page-content" style="padding:160px 0 60px 0;">
            <div class="desc-wrapper">
                <div class="desc-title">
                    <div class="desc-text">{{  info.tittle || '' }}</div>
                    <div class="desc-extra">
                        <div>{{  info.createTime || '' }}</div>
                        <div class="desc-symbol"></div>
                        <div>浏览 {{ num }}</div>
                        <div style="margin-left:auto;">{{ info.category || '' }}</div>
                    </div>
                </div>
                <div class="desc-content" v-html="info.content"  >
                </div>
            </div>
            <div class="advertisement">
                <div class="advertisement-title">相关文章</div>
                <div class="advertisement-content">
                    <div
                        v-if="list.length"
                        v-for="(item, index) in list"
                        :key="index"
                        class="advertisement-wrapper"
                        @click="$emit('onChange', { ...item, visible:true })"
                    >
                        <div>{{ item.tittle }}</div>
                        <div class="advertisement-time">{{ item.createTime }}</div>
                    </div>
                    <div class="empty-wrapper" v-else>
                        暂时没有其他文章
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { watch, ref, reactive, onMounted } from 'vue';
    import { getContentList, getViewCount } from '@/api/global.js';
    import avatarImg from '../../../public/test1.png';
    const props = defineProps({
        info:Object
    })
    const list = ref([]);
    const emit = defineEmits(['onChange']);
    const num = ref(0);
    watch(()=>props.info, ()=>{
        // 记录浏览量
        getViewCount({ contentId:props.info.contentId })
        .then(res=>{
            if ( res.data.code === 200 ) {
                num.value = res.data.data;
            }
        })
        // 获取相关文章
        getContentList({ page:1, pageSize:5, contentType:'动态' })
        .then(res=>{
            if ( res.data.code === 200 ) {
                list.value = res.data.data.filter(i=>i.contentId !== props.info.contentId );
            }
        })
    }, { immediate:true })
   
</script>
<style>
    .desc-wrapper {
        width:950px;
    }
    .desc-title {
        padding-bottom:50px;
        border-bottom: 1px solid#cacfd8;
    }
    .desc-text {
        font-size:32px;
        line-height:40px;
        margin-bottom:26px;
    }
    .desc-symbol {
        width:1px;
        height:20px;
        margin:0 16px;
        background: #cacfd8;   
    }
    .desc-extra {
        display:flex;
        align-items: center;
        justify-content: flex-start;
        font-size:16px;
        color:#525866;
    }
    .desc-content {
        font-size:20px;
        line-height:30px;
        color:#525866;
        padding-top:26px;
    }
    .desc-content img {
        width:100%;
    }
    .desc-content video {
        width:100%;
    }
    .advertisement {
        width:415px;
        background:#fff;
        position:fixed;
        left:calc( 50% + 300px);
        top:220px;
        border-radius:4px;
        padding:24px;
        box-shadow: 0px 1px 2px #0a0d1408;
        z-index:10;
    }
    .advertisement-title {
        font-size:20px;
        line-height: 30px;
        color:#000;
        text-align: center;
        padding-bottom:24px;
        border-bottom:1px solid  #e1e4ea;
    }
    .advertisement-content {
        font-size:14px;
        line-height:20px;
        color:#0E121B;
        padding:24px;
    }
    .advertisement-wrapper {
        margin-bottom:24px;
        position:relative;
    }
    .advertisement-wrapper::after {
        content:'';
        position:absolute;
        left:-20px;
        top:4px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid #335CFF;
    }
    .advertisement-time {
        margin-top:6px;
        font-size:16px;
        line-height:20px;
        color:#CACFD8;
    }
</style>